<template>
    <view class="error-page">
        <image class="bg-img" src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/a23da75cbe1e31fb41745b9311c4e0c4.svg"></image>
        <view class="tips">
            <view class="tips-title">{{ msg.title || '' }}</view>
            <view class="tips-content">{{ msg.tips || '' }} </view>
            <view class="tips-content">{{ code || '' }} </view>
        </view>

        <view class="bottom" :style="{ paddingBottom: (safeAreaBottom + 7.5) + 'px' }">
            <view class="btn" @click="reflash">刷新</view>
        </view>
    </view>
</template>
<script>
export default {
	data() {
		return {
			safeAreaBottom: 0,
			code: '',
			msg: {},
			routePag: ''

		};
	},
	onLoad(os) {
		this.code = os.code;
		this.msg = this.getCodeText();
		uni.getStorage({
			key: 'route_his',
			success: (res) => {
				this.routePag = res.data;
			}
		});
		uni.getSystemInfo({
			success: (res) => {
				this.safeAreaBottom = res.screenHeight - res.safeArea.bottom;
				// console.log(this.safeAreaBottom,9999,"底部距离");
			}
		});
	},
	methods: {
		reflash() {
			// #ifdef MP-WEIXIN
			uni.redirectTo({
				url: this.routePag
			});
			// #endif

			// #ifdef H5
			uni.navigateBack();
			// #endif
		},
		getCodeText() {
			let msg = {

			};
			msg.title = '页面异常';
			msg.tips = '请稍后再试';
			if (this.code == -1) {
				msg.title = '请求失败';
				msg.tips = '请检查网络是否正常';
			}
			if (this.code == 400) {
				msg.title = '业务请求异常';
				msg.tips = '请稍后再试';
			}
			if (this.code == 401) {
				msg.title = '认证异常';
				msg.tips = '请确认是否有权限或重新登录';
			}
			if (this.code == 404) {
				msg.title = '请求数据丢失了';
				msg.tips = ' ';
			}
			if (this.code >= 500) {
				msg.title = '服务器异常';
				msg.tips = '请联系管理员';
			}
			return msg;
		}
	}
};
</script>
<style>
page {
    background-color: #F3F6F8;
}
</style>
<style lang="scss" scoped>
.error-page {
    width: 100%;

}

.bg-img {
    display: block;
    width: 700rpx;
    height: 700rpx;
    margin: auto;
}

.tips {
    width: 100%;
    text-align: center;

    &-title {
        font-size: 42rpx;
        font-weight: bold;
        text-align: center;
        color: #0091ff;
    }

    &-content {
        font-size: 24rpx;
        text-align: center;
        color: #999999;
        padding-top: 5rpx;
    }
}

.bottom {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15rpx 0;
    z-index: 99;

    .btn {
        width: 722rpx;
        height: 70rpx;
        background: #0091ff;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 28rpx;
    }
}
</style>